import React, {Component} from 'react';
import '../css/LeftTop.css'
import echarts from 'echarts'

class LeftTop extends Component {

    componentDidMount() {
        let myChart = echarts.init(document.getElementById('main'));
        // 指定图表的配置项和数据
        var option = {
            tooltip: {
                trigger: 'item',
                formatter: "{b}: {c} ({d}%)"
            },
            legend: {
                orient: 'horizontal',
                x: 'right',
                textStyle: {
                    color: "#fff"
                },
            },
            series: [
                {
                    type: 'pie',
                    radius: ['30%', '70%'],
                    data: [
                        {
                            value: 400, name: '在线率', itemStyle: {
                                color: '#11c0ff'
                            },
                        },
                        {
                            value: 310, name: '离线率', itemStyle: {
                                color: '#fc5e40'
                            },
                        },
                    ],
                    label: {
                        show: true,
                        position: 'top',
                        formatter: '{c}'
                    }
                },
            ]
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    }

    render() {
        return (

            <div className="layout_left_top">
                <div className="nav"><span className="nav_left"/> <span
                    className="nav_cont">监控点统计</span> <span className="nav_right"/></div>
                <div className="data-box1">
                    <i className="topL"/>
                    <i className="topR"/>
                    <i className="bottomL"/>
                    <i className="bottomR"/>
                    <div style={{position: 'absolute', margin: '20px'}}>
                        <span className="span-left-top">全市监控点总数统计</span><br/>
                        <span className="span-left-number">12.73/</span>
                        <span className="span-left-number1">2222</span>
                    </div>
                    <div id="main" style={{width: '100%', height: '110%'}}/>
                </div>
            </div>
        );
    }
}

export default LeftTop;
